What is a breakpoint in a media query?

That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

How do I choose a breakpoint?

Now you can choose breakpoints according to the content and the design task in front of you rather than follow a prescribed path. You have the option of implementing breakpoints according to the viewport (media queries) or according to blocks of elements (container queries).

How to use media queries for common device breakpoints?

Learn how to use media queries for common device breakpoints. There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five common groups: @media only screen and (max-width: 600px) {...} @media only screen and (min-width: 600px) {...}